<template>
  <el-table
    :data="table"
    fit>
    <el-table-column
      fixed
      label="需求名称">
      <template slot-scope="scope">
        <el-tag type='primary' v-if="scope.row.change == 1">变更</el-tag>
        <a>{{ scope.row.demandName }}</a>
      </template>
    </el-table-column>
    <el-table-column
      label="所属项目"
      prop="bgProject">
    </el-table-column>
    <el-table-column
      label="提出人"
      prop="proposer">
    </el-table-column>
    <el-table-column
      label="提出时间"
      prop="proposeTime">
    </el-table-column>
    <el-table-column
      label="需求来源"
      prop="demandSource">
    </el-table-column>
    <el-table-column
      label="状态">
      <template slot-scope="scope">
        <div class="state">
          <el-tag type='info' v-if="scope.row.state == 0">未开始</el-tag>
          <el-tag type='success' v-if="scope.row.state == 1">进行中</el-tag>
          <el-tag type='danger' v-if="scope.row.state == 2">取消</el-tag>
          <el-tag type='primary' v-if="scope.row.state == 3">完成</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="计划工时"
      prop="planTime">
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      width="270px"
      >
      <template slot-scope="scope">
        <el-button type="success" icon="el-icon-caret-right" circle
                   :disabled="scope.row.state != 0"
                   @click="updateDemand(scope.row, 1)">
        </el-button>
        <el-button type="success" icon="el-icon-check" circle
                   :disabled="scope.row.state != 1"
                   @click="updateDemand(scope.row, 3)">
        </el-button>
        <el-button type="danger" icon="el-icon-close" circle
                   :disabled="scope.row.state != 1"
                   @click="updateDemand(scope.row, 2)">
        </el-button>
        <el-button type="primary" icon="el-icon-edit" circle
                   @click="showDialog(scope.row.demandName, scope.row.bgContract)">
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  name: "DemandMatrixTable",
  data() {
    return{
    }
  },
  props: {
    table: Array
  },
  methods: {
    showDialog(demandName, contractName) {
      this.$emit("updateDialogVisible", demandName, contractName)
    },
    updateDemand(demand, state) {
      demand.state = state
      this.$emit("updateDemand", demand)
    }
  }
}
</script>

<style scoped>

</style>
